<template>
  <div class="ele-body">
    <!-- 数据表格 -->
    <el-card shadow="never">
      <ele-pro-table
        ref="table"  row-key="id" :columns="columns" :datasource="datasource" 
        :need-page="true"  @done="onDone"  :height="tableHeight" :full-height="tableFullHeight" 
      >
        <!-- 标题列 -->
        <template slot="title" slot-scope="{ row }">
          <i :class="row.icon"></i> {{ row.title }}
        </template>
        <!-- 操作列 -->
        <template slot="action" slot-scope="{ row }">
          <!-- <el-link  type="primary" :underline="false"  href={{ row.templateUrl }} download style="vertical-align:baseline">下载模板 -->
          <el-link  type="primary"  :underline="false"  icon="el-icon-download" v-permission="'System_Template_Down'"  @click="download(row)" >下载</el-link>
        </template>
      </ele-pro-table>
    </el-card>
    <!-- 导出数据 -->
    <ExportDialog ref="ExportDialog"></ExportDialog>
  </div>
</template>

<script>
  import ExportDialog from '@/components/Excel/ExportDialog'
  import { QueryImporttemplateByCondition } from '@/api/systemmanager/templatesmanager';
  export default {
    name: 'TemplatesManager',
    components: { ExportDialog},
    data() {
      return {
        // 表格列配置
        columns: [
          {columnKey: 'index', type: 'index', width: 50, align: 'center', showOverflowTooltip: true, fixed: 'left', label:'序号',},
          {prop: 'typeDesc', label: '模板类型', showOverflowTooltip: true, sortable: 'name',align: 'center',},
          // {prop: 'templateUrl', label: '模板地址',  showOverflowTooltip: true, sortable: 'phone',align: 'center',},
          // {prop: 'remark', label: '备注', showOverflowTooltip: true, sortable: 'sexDesc',align: 'center',},
          // {prop: 'status', label: '状态', width: 80, slot:'status',align: 'center',},
          {columnKey: 'action', label: '操作', width: 100, align: 'center', resizable: false,slot: 'action', hideInSetting: true, showOverflowTooltip: true}
        ],
        fixedHeight:true,
      };
    },
    computed: {
        // 表格高度
        tableHeight() {
          var fh = this.fixedHeight ? 'calc(100vh - 250px)' : void 0;

          return fh;
        },
        // 表格全屏时高度
        tableFullHeight() {
          var fh =  this.fixedHeight ? 'calc(100vh - 126px)' : null;

          return fh;
        },
      },
    methods: {
      /* 表格数据源 */
      async datasource(params) {
        params.where.pageindex = params.page;
        params.where.pagesize = params.limit;

        //添加排序
        if(params.order.order == null || params.order.order == undefined){
          params.where.orderBys = [{ sort: "createDate", order: 1, }];
        }else{
          params.where.orderBys = [];
          params.where.orderBys.push({sort:params.sorter.column.sortable,order:params.order.order=='asc'?0:1});
        }

        let data = await QueryImporttemplateByCondition(params.where);

        return{ list:data,count :data.lenght}
      },

      /* 表格渲染完成回调 */
      onDone({ data }) {
        this.roleList = data;
      },
      /* 刷新表格 */
      reload(where) {
        this.$refs.table.reload({ where: where });
      },
      download(row){
        let a = document.createElement('a')
        a.href = row.templateUrl
        a.download = row.typeDesc +'模板.xlsx'
        a.style.display = 'none'
        document.body.appendChild(a)
        a.click()
        a.remove()
      },
    }
  };
</script>

<style scoped>
 
 ::v-deep .el-table__body-wrapper {
    height: 450px !important;
    overflow-y:auto !important;
  }
</style>
